<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
  <!-- 
    什么是指令？
      答：指令本质是对DOM操作的封装。
    什么是自定义指令？
      答：vue帮我们内置了很多的指令，也可以允许自定义指令。也是把一些常用的DOM操作进行封装，封装成自定义指令。

    自定义指令的目的：复用  
       我们讲的很多内容都是复用技巧：组件，mixin，自定义指令，原型链，插件，过滤器。

    自定义全局指令：Vue.direactive("指令名",{}/fn)   在任意组件中都可以使用自定义全局指令。
    自定义局部指令：通过direactive选项来自定义局部指令的。只能在当前组件有效

    面试题：
      1）常用的指令有哪些？你是怎么理解指令？
      2）在工作中是否封装过指令？ 水印指令，权限指令，拖拽指令....
    
    推荐8个常用指令（项目经验）：
      https://zhuanlan.zhihu.com/p/337659611
      https://juejin.cn/post/6906028995133833230

    
   -->
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 在vue中 指令后面的不是字符串 -->
    <h2 v-color="'red'">{{name}}</h2>
    <div v-color="'blue'">我是一个孤独的DIV</div>
    <div v-color="vc">我是一个孤独的DIV</div>
  </div>

  <script>
    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name: "码路",
          vc: "gold"
        }
      },
      // 写局部自定义指令
      // 指令的底层是操作DOM
      directives: {
        // "color": function (el, binding, vnode) {
        //   console.log("el:", el);// el是指令所在的dom元素
        //   console.log("binding:", binding); // 指令相关的参数
        //   // vnode是dom元素对应的虚拟节点，里面有一个上下文
        //   // 在封装自定义指令时，会使用到上下文
        //   console.log(vnode);

        //   el.style.color = binding.value;
        // }

        "color": {
          bind(el, binding, vnode) {
            console.log("bind...");
            el.style.color = binding.value;
          },
          update(el, binding, vnode) {
            console.log("updted....");
            // 如果模板刷新了，还可以进行DOM操作


            el.style.color = "black";
          },
        }
      }
    });
  </script>
</body>

</html>